<template>
  <div class="login">
    <!-- 顶部标题 -->
    <div class="login-header">
      <img src="//s02.mifile.cn/assets/static/image/logo-mi2.png" alt="小米" class="logo">
      <h2>小米账号登录</h2>
    </div>

    <van-form @submit="onSubmit">
      <div class="form-content">
        <van-field
          v-model="username"
          name="username"
          placeholder="用户名/邮箱/手机号"
          :rules="[{ required: true, message: '请填写用户名' }]"
          class="custom-field"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
          class="custom-field"
        />
      </div>
      
      <div class="login-tips">
        温馨提示：建议使用以下账号测试
        <p>账号：admin 密码：123456</p>
        <p>账号：user 密码：123456</p>
      </div>

      <div class="submit-btn">
        <van-button block type="primary" native-type="submit" color="#ff6700">
          登录
        </van-button>
      </div>
      
      <div class="other-links">
        <span>手机短信登录/注册</span>
        <span>找回密码</span>
      </div>
      
      <div class="other-login">
        <div class="title">
          <span class="line"></span>
          <span class="text">其他登录方式</span>
          <span class="line"></span>
        </div>
        <div class="icons">
          <i class="iconfont icon-weixin"></i>
          <i class="iconfont icon-qq"></i>
          <i class="iconfont icon-weibo"></i>
        </div>
      </div>
    </van-form>
  </div>
</template>

<script>
import { login } from '@/api'

export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async onSubmit(values) {
      try {
        const res = await login(values)
        if (res.code === 0) {
          await this.$store.dispatch('login', res.data)
          this.$router.push('/')
        } else {
          this.$toast.fail(res.message)
        }
      } catch (error) {
        console.error(error)
        this.$toast.fail('登录失败')
      }
    }
  }
}
</script>

<style scoped>
.login {
  min-height: 100vh;
  background-color: #fff;
  padding: 20px;
}

.login-header {
  text-align: center;
  margin-bottom: 40px;
  padding-top: 40px;
}

.logo {
  width: 50px;
  margin-bottom: 15px;
}

.login-header h2 {
  font-size: 24px;
  color: #333;
  font-weight: normal;
}

.form-content {
  margin: 0 15px;
}

.custom-field {
  margin-bottom: 15px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.custom-field >>> .van-field__control {
  height: 44px;
  font-size: 14px;
}

.login-tips {
  margin: 15px;
  padding: 10px;
  background-color: #fff7e6;
  border-radius: 4px;
  color: #666;
  font-size: 12px;
  line-height: 1.5;
}

.submit-btn {
  margin: 30px 15px;
}

.submit-btn .van-button {
  height: 44px;
  font-size: 16px;
  border-radius: 4px;
}

.other-links {
  display: flex;
  justify-content: space-between;
  margin: 15px;
  color: #666;
  font-size: 14px;
}

.other-login {
  margin-top: 50px;
  text-align: center;
}

.other-login .title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.line {
  width: 50px;
  height: 1px;
  background: #e0e0e0;
  margin: 0 10px;
}

.text {
  color: #999;
  font-size: 14px;
}

.icons {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.icons i {
  font-size: 24px;
  color: #666;
}
</style> 